<template>
	<view class="user">
		<view class="user-form">
			<uni-forms ref="form" :model="formData" :rules="rules">
				<uni-forms-item name="password">
					<uni-easyinput prefixIcon="locked-filled" type="password" v-model="formData.password" focus
						placeholder="请输入新密码" :styles="inputStyles" />
				</uni-forms-item>
				<uni-forms-item name="confirmPassword">
					<uni-easyinput prefixIcon="locked-filled" type="password" v-model="formData.confirmPassword" focus
						placeholder="请再次确认新密码" :styles="inputStyles" />
				</uni-forms-item>
				<!-- 待拓展 以后完善 -->
				<!-- <uni-forms-item name="code">
					<uni-row :gutter="40">
						<uni-col :span="16">
							<uni-easyinput prefixIcon="phone-filled" v-model="formData.code" disabled
								:styles="inputStyles" />
						</uni-col>
						<uni-col :span="8">
							<button disabled="disabled" type="primary" class="send-code"
								@click="sendCode">{{sendMsg}}</button>
						</uni-col>
					</uni-row>
				</uni-forms-item> -->
			</uni-forms>
			<button class="btn-submit" @click="handleSave">确认修改</button>
		</view>
	</view>
</template>

<script>
	import updateInfoApi from '../../../api/avatar/avatar.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				formData: {
					password: '',
					confirmPassword: '',
					code: ''
				},
				inputStyles: {
					borderColor: '#8be627',
				},
				disabled: false,
				sendMsg: '发送验证码',
				// 校验规则
				rules: {
					password: {
						rules: [{
							required: true,
							errorMessage: '新密码不能为空'
						}]
					},
					confirmPassword: {
						rules: [{
								required: true,
								errorMessage: '确认新密码不能为空',
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (data.password !== value) {
										callback('新密码和确认密码不相同')
									}
									return true
								}
							}
						]
					},
				},
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		computed: {
			...mapState('login', ['userInfo'])
		},
		created() {
			this.formData.userPhone = this.userInfo.userPhone
		},
		methods: {
			sendCode() {
				this.disabled = true
			},
			...mapMutations('login', {
				'setUserInfo': 'SET_USERINFO'
			}),
			handleSave() {
				this.$refs['form'].validate().then((res) => {
					let param = {
						userId: this.userInfo.userId,
						password: this.formData.password
						// ...this.formData
					}
					updateInfoApi.updatePassWord(param).then(res => {
						if (res.code == 200 && Object.keys(res.info).length != 0) {
							if (getCurrentPages().length > 1) {
								uni.navigateBack()
							} else {
								uni.navigateTo({
									url: '/pages/avatar/setting'
								})
							}
						}
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.user {
		width: 100vw;
		height: 100vh;
		background-size: cover;
		background-color: $uni-bg-color;

		.user-form {
			text-align: center;
			padding: 20rpx;

			.send-code {
				height: 75rpx;
				line-height: 75rpx;
			}

			.btn-submit {
				background-color: $uni-primary;
				color: $uni-white;
			}
		}

	}
</style>